<template>
  <div>
    <div class="con">
      <div class="title">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>我的购物车</span>
        </p>
      </div>
      <div class="query">
        <el-form ref="queryParamsRef" inline :model="queryParams" label-width="90px">
          <el-form-item label="编号" props="searchValue">
            <el-input
              v-model="queryParams.searchValue"
              placeholder="输入编号/订单摘要"
              clearable
            />
          </el-form-item>
          <el-form-item label="购物车类型" props="shoppingCarEnums">
            <el-select
              v-model="queryParams.shoppingCarEnums"
              placeholder="请选择购物车类型"
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySearch"> 查询 </el-button>
            <el-button type="primary" plain @click="resetQuery">重置 </el-button>
          </el-form-item>
        </el-form>
        <div style="flex: 1">
          <el-button
            type="primary"
            style="float: right"
            @click="handlePay(null)"
            :disabled="multipleSelection.length == 0"
          >
            立即付款
          </el-button>
        </div>
      </div>
      <el-table
        border
        :data="dataList"
        header-cell-class-name="title-style"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="shoppingCarId" label="编号" align="center" />
        <el-table-column prop="carEnums" label="购物车类型" align="center">
          <template #default="scope">
            <section class="operate">
              {{ getEnumsLabel(scope.row.shoppingCarEnums) }}
            </section>
          </template>
        </el-table-column>
        <el-table-column prop="orderAbstract" label="订单摘要" align="center" />
        <el-table-column prop="updatePrice" label="金额(元)" align="center" />
        <el-table-column prop="createTime" label="下单时间" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <section class="operate">
              <el-button link type="primary" @click="handlePay(scope.row)">
                付款
              </el-button>
              <el-button link type="primary" @click="handleDelete(scope.row)">
                移除
              </el-button>
            </section>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-footer">
        <el-pagination
          :total="total"
          v-model:current-page="queryParams.params.pageNum"
          v-model:page-size="queryParams.params.pageSize"
          layout="total, prev, pager, next"
          small
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { list, deleteCart } from "@/api/control/order";
import { useRouter } from "vue-router";
const router = useRouter();

const queryParams = ref<any>({
  searchValue: null,
  shoppingCarEnums: null,
  params: {
    pageNum: 1,
    pageSize: 10,
  },
});
const dataList = ref<any>([]); // 数据列表
const total = ref(0); // 总条数
const multipleSelection = ref<any>([]); // 多选数据
const typeList = ref<any>([
  { value: "CLOUD_SERVER", label: "云服务器" },
  { value: "CLOUD_MARKET", label: "云市场" },
  { value: "GOV_CLOUD", label: "政务云" },
  { value: "CLOUD_SERVER_RENEW", label: "云服务器续费" },
  { value: "CLOUD_SERVER_CHANGE", label: "云服务器变更" },
]);

onMounted(() => {
  getList();
});

// 获取购物车列表
const getList = () => {
  list(queryParams.value).then((res: any) => {
    dataList.value = res.rows;
    total.value = res.total;
  });
};

// 多选
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

// 搜索
const querySearch = () => {
  queryParams.value.params.pageNum = 1;
  getList();
};

// 重置
const resetQuery = () => {
  queryParams.value.searchValue = null;
  queryParams.value.shoppingCarEnums = null;
  queryParams.value.params.pageNum = 1;
  getList();
};

// 获取类型中文名称
const getEnumsLabel = (val?: string) => {
  let row = typeList.value.find((i) => i.value == val);
  return row ? row.label : "";
};

// 移除购物车
const handleDelete = (row: any) => {
  ElMessageBox.confirm("确认移除该商品吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteCart([row.shoppingCarId]).then((res: any) => {
        if (res.code == 200) {
          ElMessage.success("移除成功");
          getList();
        }
      });
    })
    .catch(() => {});
};

// 付款
const handlePay = (row: any) => {
  let ids = <any>[];
  if (row) {
    ids = [row.shoppingCarId];
  } else {
    ids = multipleSelection.value.map((item: any) => item.shoppingCarId);
  }
  router.push("/client/cloudMarketplace/components/shoppingStep1?ids=" + ids.join(","));
};
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  height: auto;
  .con-title {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      display: flex;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
      }
    }
    span:nth-child(2) {
      display: flex;
      align-items: center;
      margin-left: 10px;
      font-size: 16px;
    }
  }
  .query {
    width: 100%;
    height: 50px;
    margin: 20px 0;
    display: flex;
  }
  .page-footer {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
